<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">

        <el-col :span="4">
          <el-input v-model="listQuery.title" placeholder="请输入页面标题" clearable @change="search"></el-input>
        </el-col>

<!--        <el-col :span="2">-->
<!--          <el-input v-model="listQuery.content" placeholder="页面内容" clearable @change="search"></el-input>-->
<!--        </el-col>-->

        <el-col  :span="15">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="5">
          <el-button type="success" @click="handleAddPage" size="mini">增加页面</el-button>
          <el-button type="success" @click="handleAddProtocol" size="mini">增加协议</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table :data="pageList" style="width: 98%;margin: 10px auto 0" border :key="pageList.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">

      <el-table-column label="页面种类" align="center">
        <template slot-scope="{row}">
          <span>{{row.type}}</span>
        </template>
      </el-table-column>

      <el-table-column label="页面标题" align="center">
        <template slot-scope="{row}">
          <span>{{row.title}}</span>
        </template>
      </el-table-column>


      <el-table-column label="页面内容" align="center">


        <template slot-scope="{row}" >
          <span v-if="row.type === 'banksetting'">{{row.content}}</span>
          <i v-if="row.type === 'pagehome'" class="el-icon-view" @click="showContent(row.content)"></i>
        </template>

<!--        <template slot-scope="{row}" >-->
<!--         -->
<!--        </template>-->

      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" @click="openDelete(row.page_id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
    <add-page ref="showAddPageDialog"/>
    <edit-page ref="showEditDialog"/>
    <edit-agreement-page ref="showEditAgreementDialog"/>
    <my-content ref="mycontent" />
    <add-protocol ref="showAddProtocolDialog"/>
  </div>
</template>

<script>
  import store from '@/store'
  import {list,del} from '@/api/thk/cms/page'

  import addPage from './addPage'
  import editPage from './edit'
  import editAgreementPage from './editAgreement'
  import MyContent from './content'
  import addProtocol from './addProtocol'

  export default {
    name: 'index',
    components: {
      editPage,
      addPage,
      MyContent,
      addProtocol
    },

    data() {
      return {

        pageList: [],

        listQuery: {
          title: undefined,
          content:undefined,
          type: undefined,
          page: 1,
          pagesize: 10
        },

        total: undefined,

        status_options: [{
          value: '0',
          label: '停用'
        }, {
          value: '1',
          label: '启用'
        }, {
          value: '',
          label: '全部'
        }],

        loading: true


      }
    },

    // created生命周期中调用查询question列表的方法
    created() {
      this.getPageList();
    },

    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },

    methods: {
      getPageList(){
        list(store.getters.token, this.listQuery).then(res =>{
          this.total = res.data.list.total
          this.pageList = res.data.list.data
          console.log(this.pageList[0],"666")
          console.log(this.pageList[4],"666")
        },error => {
          console.log(error)
        })
      },

      // 触发增加按钮弹出增加问题对话框
      handleAddPage(){
        // arg：是否点击了确定按钮
        this.$refs.showAddPageDialog.cancelSubmit()
      },

      handleAddProtocol(){
        this.$refs.showAddProtocolDialog.cancelSubmit()
      },


      // 触发编辑按钮.row是一行的数据，点击了哪一行，就是哪一行的数据，根据数据回显
      handleEdit(row){
        console.log('handleEdit',row)
        // if(row.type=='"banksetting"'){
          
        //   this.$refs.showEditDialog.showEditDialog(row)

        // }else{
          
          this.$refs.showEditDialog.showEditDialog(row)
        // }
        
      },

      // 删除question
      handleDelete(page_id){
        del(store.getters.token, page_id).then(res => {
          // 删除之后，需要重新渲染.重新查询数据，会根据数据的length重新渲染
          this.getPageList()
          console.log("删除成功!",res)
        }).catch(err => {
          console.log("删除失败",err)
        })
      },

      // 弹出是否删除对话框, then中调用handleDelete
      openDelete(page_id) {
        this.$confirm('此操作将会删除问题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(page_id)
          this.$message({
            type: 'success',
            message: '删除成功!'

          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },



      showContent(content){
        content = JSON.parse(content)
        this.$refs.mycontent.showContent(content)
      },

      search(){
        this.listQuery.page = 1
        this.getPageList()
      },

      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getPageList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getPageList()
      },

    }
  }

</script>

<style>

  i::before{
    /*display: inline-block;*/
    font-size: 20px;
    height: 18px;
    width: 18px;
  }

  i:hover{
    color: #409EFF;
  }
</style>
